<template>
	<view>
		<view class="por">
			<image src="/static/page1/bottom1.png" class="w100" mode="widthFix"></image>
			<view class="bottbox">
				<view class="bj_between" style="margin-bottom: 54rpx;">
					<image src="/static/gj/bxb.png" class="bottbox-gqbox" mode="widthFix"></image>
					<view style="width: 490rpx;">
						<view class="bottbox-gqtit">
							{{$t("page1.tit1")}}
						</view>
						<view class="bottbox-gqtxt">
							{{$t("page1.txt")}}
						</view>
					</view>
				</view>
				<view class="tc f32 fwb mb30">
					{{$t("page1.tit2")}}
				</view>
				<view class="bj_between">
					<image src="/static/page1/b1.png" class="bottbox-bpic" mode="widthFix"></image>
					<image src="/static/page1/b2.png" class="bottbox-bpic" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="page1bgbox">
			<view class="tc">
				<image src="/static/page1/sl.png" class="page1bgbox-bgpic" mode="widthFix"></image>
			</view>
			<view class="page1bgbox-bgtxt">
				{{$t("page1.bq")}}
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style scoped lang="scss">
	.bottbox {
		position: absolute;
		padding: 50rpx 60rpx 146rpx;
		left: 0;
		top: 0;
		width: 100%;

		&-gqbox {
			width: 124rpx;
		}

		&-gqtit {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		&-gqtxt {
			font-size: 26rpx;
			color: #9C9FB2;
		}

		&-bpic {
			width: 296rpx;
		}
	}

	.page1bgbox {
		background: #003311;
		padding: 30rpx 20rpx 268rpx;

		&-bgpic {
			width: 268rpx;
			margin-bottom: 20rpx;
		}

		&-bgtxt {
			font-size: 22rpx;
			color: #5C6282;
			line-height: 40rpx;
			text-align: center;
		}
	}
</style>